<template>
    <div class="drawer-modular maxbox">
        <el-drawer title="标题" :visible.sync="drawerVisible" :with-header="false" :size="size" :before-close="close"
            :modal="true" :wrapper-closable="true" v-loading="loading">
            <div class="drawer-title">{{ drawerTitle }}</div>
            <div class="drawer-content">
                <el-scrollbar wrap-class="scrollbar-wrapper">
                    <el-form ref="ruleForm" :model="item" :rules="serviceValidation" label-width="80px"
                        label-position="top">
                        <!-- <div class="titleBox">
                            <div class="title_span" />
                            <div class="title_name">基础信息</div>
                        </div> -->
                        <el-tabs v-model="activeName">
                            <el-tab-pane label="基础信息" name="first" />
                            <el-tab-pane label="图/视频" name="second" />
                        </el-tabs>
                        <div v-if="activeName == 'first'">
                            <el-row :gutter="18" class="mb8">
                                <el-col :span="9">
                                    <el-form-item label="房屋标题" prop="title">
                                        <el-input v-model="item.title" placeholder="请输入房屋标题" size="small" clearable
                                            maxlength="50" show-word-limit />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="9">
                                    <el-form-item label="房屋副标题" prop="sideTitle">
                                        <el-input v-model="item.sideTitle" placeholder="请输入房屋副标题" size="small" clearable
                                            maxlength="50" show-word-limit />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="18" class="mb8">
                                <el-col :span="9">
                                    <el-form-item label="联系人" prop="contactPerson">
                                        <el-input v-model="item.contactPerson" placeholder="请输入联系人" size="small"
                                            clearable show-word-limit />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="9">
                                    <el-form-item label="联系电话" prop="contactPhone">
                                        <el-input v-model="item.contactPhone" placeholder="请输入联系电话" size="small"
                                            clearable show-word-limit />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="18" class="mb8">
                                <el-col :span="9">
                                    <el-form-item label="设备id" prop="deviceId">
                                        <el-input v-model="item.deviceId" placeholder="请输入设备id" size="small" clearable
                                            show-word-limit />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="9">
                                    <el-form-item label="设备密码" prop="devicePassword"
                                        :rules="item.deviceId ? serviceValidation.devicePassword : []">
                                        <el-input v-model="item.devicePassword" placeholder="请输入设备密码" size="small"
                                            clearable show-word-limit />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="18" class="mb8">
                                <el-col :span="9">
                                    <el-form-item label="定金" prop="depositPrice">
                                        <el-input v-model="item.depositPrice" placeholder="请输入定金" size="small" clearable
                                            show-word-limit />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="18" class="mb8">
                                <el-col :span="9">
                                    <el-form-item label="小区" prop="quarterId">
                                        <el-select v-model="item.quarterId" placeholder="请选择小区" clearable size="small" filterable>
                                            <el-option v-for="(item, index) in quarterList" :key="index"
                                                :label="item.name" :value="item.id" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="9">
                                    <el-form-item label="出租状态" prop="rentStatus">
                                        <el-select v-model="item.rentStatus" placeholder="请选择出租状态" clearable filterable
                                            size="small">
                                            <el-option v-for="(item, index) in rentStatusOptions" :key="index"
                                                :label="item.dictLabel" :value="item.dictValue" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="18" class="mb8">
                                <el-col :span="9">
                                    <el-form-item label="属性" prop="attrIds">
                                        <el-select v-model="item.attrIds" placeholder="请选择属性" clearable size="small" filterable
                                            multiple>
                                            <el-option v-for="(item, index) in attrList" :key="index" :label="item.name"
                                                :value="item.id" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="9">
                                    <el-form-item label="地标" prop="landmarkIds">
                                        <el-select v-model="item.landmarkIds" placeholder="请选择地标" clearable size="small" filterable
                                            multiple>
                                            <el-option v-for="(item, index) in landmarkList" :key="index"
                                                :label="item.name + '---' + item.address" :value="item.id" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="18" class="mb8">
                                <el-col :span="9">
                                    <el-form-item label="基础设施" prop="facilityIds">
                                        <el-select v-model="item.facilityIds" placeholder="请选择基础设施" clearable filterable
                                            size="small" multiple>
                                            <el-option v-for="(item, index) in facilityList" :key="index"
                                                :label="item.facilityName" :value="item.id" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="9">
                                    <el-form-item label="房源类型" prop="typeId">
                                        <el-select v-model="item.typeId" placeholder="请选择房源类型" clearable size="small" filterable>
                                            <el-option v-for="(item, index) in typeList" :key="index" :label="item.name"
                                                :value="item.id" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="18" class="mb8">
                                <el-col :span="9">
                                    <el-form-item label="状态" prop="status">
                                        <el-radio-group v-model="item.status">
                                            <el-radio v-for="(item, index) in statusList" :key="index"
                                                :label="item.value">
                                                {{ item.label }}
                                            </el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="9">
                                    <el-form-item label="推荐" prop="isRecommend">
                                        <el-radio-group v-model="item.isRecommend">
                                            <el-radio v-for="(item, index) in recommendList" :key="index"
                                                :label="item.value">
                                                {{ item.label }}
                                            </el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="18" class="mb8">
                                <el-col :span="9">
                                    <el-form-item label="自行看房" prop="selfView">
                                        <el-radio-group v-model="item.selfView">
                                            <el-radio v-for="(item, index) in selfViewList" :key="index"
                                                :label="item.value">
                                                {{ item.label }}
                                            </el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="18" class="mb8">
                                <el-col :span="9">
                                    <el-form-item label="房屋地址" prop="address">
                                        <el-input v-model="item.address" placeholder="请输入房屋地址" size="small" clearable
                                            show-word-limit />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="9">
                                    <el-form-item label="单元房号" prop="roomLocation">
                                        <el-input v-model="item.roomLocation" placeholder="请输入单元房号" size="small"
                                            clearable show-word-limit />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="18" class="mb8">
                                <el-col :span="9">
                                    <el-form-item label="房屋面积" prop="area">
                                        <el-input v-model="item.area" type="number" placeholder="请输入房屋面积" size="small"
                                            clearable show-word-limit>
                                            <template slot="append">m²</template>
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="9">
                                    <el-form-item label="楼层" prop="floor">
                                        <el-input v-model="item.floor" placeholder="请输入楼层" size="small" clearable
                                            show-word-limit>
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="18" class="mb8">
                                <el-col :span="18">
                                    <el-form-item label="地图定位" prop="address">
                                        <GetCoordinate ref="map" @checkPoint="checkPoint" :mapStyle="mapStyle"
                                            :key="index" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="18" class="mb8">
                                <el-col :span="9">
                                    <el-form-item label="来源" prop="sourceId">
                                        <el-select v-model="item.sourceId" placeholder="请选择来源" clearable size="small" filterable
                                            @change="changeSource">
                                            <el-option v-for="(item, index) in sourceList" :key="index"
                                                :label="item.sourceName" :value="item.id" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="18" class="mb8">
                                <el-button type="primary" @click="addRow" size="small">新增一行</el-button>
                                <div class="guige">
                                    <el-table :data="item.mallGoodsRentFeeList"
                                        style="border-radius: 4px;border: 1px solid #dfe6ec;">
                                        <el-table-column label="起租月数" align="center">
                                            <template slot-scope="scope">
                                                <el-form-item :prop="'mallGoodsRentFeeList.' + scope.$index + '.num'"
                                                    :rules="serviceValidation.num">
                                                    <el-input type="number" v-model="scope.row.num" size="small" />
                                                </el-form-item>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="押金" align="center">
                                            <template slot-scope="scope">
                                                <el-form-item
                                                    :prop="'mallGoodsRentFeeList.' + scope.$index + '.rentDepositPrice'"
                                                    :rules="serviceValidation.rentDepositPrice">
                                                    <el-input type="number" v-model="scope.row.rentDepositPrice"
                                                        size="small" />
                                                </el-form-item>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="月租金" align="center">
                                            <template slot-scope="scope">
                                                <el-form-item
                                                    :prop="'mallGoodsRentFeeList.' + scope.$index + '.rentPrice'"
                                                    :rules="serviceValidation.rentPrice">
                                                    <el-input type="number" v-model="scope.row.rentPrice"
                                                        size="small" />
                                                </el-form-item>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="租客中介费" align="center" v-if="sourceName == '中介挂靠'">
                                            <template slot-scope="scope">
                                                <el-form-item
                                                    :prop="'mallGoodsRentFeeList.' + scope.$index + '.customerAgencyPrice'"
                                                    :rules="serviceValidation.customerAgencyPrice">
                                                    <el-input type="number" v-model="scope.row.customerAgencyPrice"
                                                        size="small" />
                                                </el-form-item>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="房东中介费" align="center" v-if="sourceName == '中介挂靠'">
                                            <template slot-scope="scope">
                                                <el-form-item
                                                    :prop="'mallGoodsRentFeeList.' + scope.$index + '.landlordAgencyPrice'"
                                                    :rules="serviceValidation.landlordAgencyPrice">
                                                    <el-input type="number" v-model="scope.row.landlordAgencyPrice"
                                                        size="small" />
                                                </el-form-item>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="删除" align="center">
                                            <template slot-scope="scope">
                                                <el-form-item>
                                                    <el-button type="primary" size="small"
                                                        @click="delList(scope.$index)">删除</el-button>
                                                </el-form-item>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-row>
                            <el-row :gutter="18" class="mb8">
                                <el-col :span="18">
                                    <el-form-item label="房屋详情" prop="details">
                                        <Editor v-model="item.details" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <!-- 图片 -->
                        <div v-else>
                            <el-row :gutter="18" class="mb8">
                                <el-col :span="9">
                                    <el-form-item label="标题图" prop="logo">
                                        <ImageUpload v-model="item.logo" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="18" class="mb8">
                                <el-col :span="18">
                                    <el-form-item label="视频" prop="mediaFile">
                                        <MediaUpload v-model="item.mediaFile" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="18" class="mb8">
                                <el-col :span="18">
                                    <el-form-item label="图集" prop="images">
                                        <ImageUploadNew v-model="item.images" :limit="36" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                    </el-form>
                </el-scrollbar>
            </div>
            <div v-loading="!requestStatus" class="drawer-btn">
                <el-button @click="close()">取消</el-button>
                <el-button type="primary" @click="submit()">提交</el-button>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import { cardInfoValidation } from "./inputValidation";
import GetCoordinate from '@/views/components/map/locationMap';
import ImageUploadNew from '@/components/ImageUploadNew';
import { getGoods, addGoods, updateGoods } from "@/api/mall/goods";
import ImageUpload from '@/components/ImageUpload';
import MediaUpload from '@/components/MediaUpload'
export default {
    components: {
        GetCoordinate, ImageUploadNew, ImageUpload, MediaUpload
    },
    props: {
        // 窗口宽度
        size: {
            type: String,
            default: "calc(100vw - 200px)",
        },
        //属性list
        attrList: {
            type: Array,
            default: () => []
        },
        // 地标list
        landmarkList: {
            type: Array,
            default: () => []
        },
        // 状态list
        statusList: {
            type: Array,
            default: () => []
        },
        // 来源list
        sourceList: {
            type: Array,
            default: () => []
        },
        // 基础设施list
        facilityList: {
            type: Array,
            default: () => []
        },
        // 推荐list
        recommendList: {
            type: Array,
            default: () => []
        },
        // 自行看房
        selfViewList: {
            type: Array,
            default: () => []
        },
        // 类型list
        typeList: {
            type: Array,
            default: () => []
        },
        // 小区list
        quarterList: {
            type: Array,
            default: () => []
        },
        // 出租状态list
        rentStatusOptions: {
            type: Array,
            default: () => []
        },
        mapStyle: {
            type: Object,
            default: () => ({
                width: '100%',
            })
        },
    },
    dicts: [], // 字典
    data() {
        return {
            loading: false, // 加载
            serviceValidation: cardInfoValidation, // 表单校验
            drawerVisible: false, // 窗口显示状态
            drawerTitle: "", // 窗口标题
            item: {
                mallGoodsRentFeeList: [
                    { num: null, rentDepositPrice: null, rentPrice: null }
                ],
                status: "0",
                isRecommend: "0",
                selfView: "0"
            },
            requestStatus: true, // 提交状态
            disabled: true,
            //来源名称
            sourceName: null,
            activeName: 'first',
            index: 0
        };
    },

    created() { },

    methods: {
        /** 新增-显示 */
        iShow(row) {
            if (row) {
                this.loading = true;
                this.item = row;
                this.getInfo();
                this.drawerTitle = "修改房源信息";
            } else {
                this.drawerTitle = "添加房源信息";
            }
            this.drawerVisible = true;
        },
        checkPoint(res) {
            this.item = {
                ...this.item,
                ...res.point
            }
            this.item = {
                ...this.item,
                ...res.addressComponents
            }
            this.item.city = res.addressComponents.city
            this.item.county = res.addressComponents.district
            if (res.name) {
                this.item.address = res.addressComponents.province + res.addressComponents.city + res.addressComponents.district + res.name
            } else {
                this.item.address = res.address
            }
        },

        /**
         * 获取详情
         */
        getInfo() {
            getGoods(this.item.id).then(res => {
                this.item = res.data;
                this.getSplit();
                if (this.item.lat && this.item.lng) {
                    this.index++
                    this.$nextTick(() => {
                        this.$refs.map.updatePoint({
                            lat: this.item.lat,
                            lng: this.item.lng
                        })
                    })
                }
                this.sourceName = res.data.sourceName;
                this.loading = false;
                console.log("item", this.item)
            })
        },
        /**
         * 切割数据
         */
        getSplit() {
            if (this.item.attrIds) {
                this.item.attrIds = this.item.attrIds.split(",").map((item) => {
                    return Number(item)
                });
            }
            if (this.item.landmarkIds) {
                this.item.landmarkIds = this.item.landmarkIds.split(",").map((item) => {
                    return Number(item)
                });
            }
            if (this.item.facilityIds) {
                this.item.facilityIds = this.item.facilityIds.split(",").map((item) => {
                    return Number(item)
                });
            }
        },


        /** 新增/修改 */
        submit() {
            if (this.requestStatus) {
                this.requestStatus = false;
                if (!this.item.id) {
                    this.request(addGoods, "新增");
                } else {
                    this.request(updateGoods, "修改");
                }
            }
        },

        /**
         * 切割数据
         */
        getJoin() {
            this.item.attrIds = this.item.attrIds.join(",");
            this.item.landmarkIds = this.item.landmarkIds.join(",");
            this.item.facilityIds = this.item.facilityIds.join(",");
        },

        /** 提交请求 */
        request(mothod, str) {
            console.log("提交的数据", this.item);
            if (!mothod) return false;
            this.$refs["ruleForm"].validate((valid) => {
                if (valid) {
                    this.getJoin();
                    mothod(this.item)
                        .then((res) => {
                            this.requestStatus = true;
                            if (res.code == 200) {
                                this.$message.success(`${str}成功！`);
                                this.$emit("init");
                                this.close();
                            }
                        })
                        .catch((error) => {
                            this.requestStatus = true;
                        });
                } else {
                    this.requestStatus = true;
                    this.moveToErr();
                }
            });
        },

        /** 自动定位到表单报错项 */
        moveToErr() {
            this.$nextTick(() => {
                const isError = document.getElementsByClassName("is-error");
                if (isError.length) {
                    isError[0].scrollIntoView({
                        block: "nearest",
                        behavior: "smooth",
                    });
                }
            });
        },

        /** 关闭抽屉触发 */
        close() {
            this.drawerVisible = false;
            this.disabled = true;
            this.$refs["ruleForm"].resetFields();
            this.emptyData();
        },

        /**
         * 删除一行table
         */
        delList(index) {
            this.item.mallGoodsRentFeeList.splice(index, 1);
        },

        /**
         * 新增一行table
         */
        addRow() {
            this.item.mallGoodsRentFeeList.push({
                customerAgencyPrice: null,
                landlordAgencyPrice: null,
                num: null,
                rentDepositPrice: null,
                rentPrice: null,
            });

            console.log("当前多规格表格数据", this.item.goodsSpecsList);
        },

        /**
         * 来源选中
         * @param {*} value 
         */
        changeSource(value) {
            let obj = {};
            obj = this.sourceList.find((item) => {
                return item.id == value;
            });
            console.log(obj.sourceName);
            this.sourceName = obj.sourceName
        },

        /** 清空数据源 */
        emptyData() {
            this.item = {
                id: undefined,
                deptId: undefined,
                name: undefined,
                address: undefined,
                lat: undefined,
                lng: undefined,
                phone: undefined,
                attrIds: undefined,
                landmarkIds: undefined,
                imgs: undefined,
                status: "0",
                introduce: undefined,
                delFlag: undefined,
                createBy: undefined,
                createTime: undefined,
                updateBy: undefined,
                updateTime: undefined,
                mallGoodsRentFeeList: []
            };
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/drawerModules.scss";

.titleBox {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .title_span {
        width: 5px;
        height: 18px;
        margin-right: 10px;
        background-color: #4979ff;
    }

    .title_name {
        font-size: 18px;
        font-weight: bold;
    }
}

.guige {
    margin-top: 10px;
    border-radius: 4px;
}
</style>

<style lang="scss">
.el-drawer__body {
    padding: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100% - 110px);
}
</style>